import { useReducer, useState } from "react";
import { post_fake_auth } from '../../api/api'

const useForm = (sucessCallback) => {
    const emailReg =  /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/;
    const [errMessage, setErrMessage] = useState('')
    // const [submit, setSubmit] = useState(false)

    const initialForm = {
        userName: '',
        userEmail: '',
        confirmEmail: ''
    }

    const initalErrMsg = {
        userName: '',
        userEmail: '',
        confirmEmail: ''
    }

    const validParams = () => {
        // const result = false
        if (fromValue.userName.length < 3 || 
            !emailReg.test(fromValue.userEmail) ||
            !emailReg.test(fromValue.confirmEmail) ||
            fromValue.confirmEmail !== fromValue.userEmail) {
            return false
        }

        return true
    }

    const errMsgReducer = (state, action) => {
        switch(action.type) {
            case 'userEmail':
                if (!emailReg.test(action.payload)) {
                    return { ...state, userEmail: 'invalid email format'}
                }
                else if (action.payload !== fromValue.confirmEmail) {
                    return { 
                        ...state, 
                        userEmail: 'email address should be same',
                        confirmEmail: 'email address should be same' }
                }
                else if (action.payload === fromValue.confirmEmail) {
                    return {
                        ...state, 
                        userEmail:  '',
                        confirmEmail: ''
                    }
                   
                }
                return { ...state, userEmail: '' }
            case 'userName':
                if (action.payload.length < 3) {
                    return { ...state, userName: 'userName is too short'}
                }
                return { ...state, userName: '' }
            case 'confirmEmail':
                if (!emailReg.test(action.payload)) {
                    return { ...state, confirmEmail: 'invalid email format'}
                }
                else if (action.payload !== fromValue.userEmail) {
                    return { 
                        ...state, 
                        userEmail: 'email address should be same',
                        confirmEmail: 'email address should be same'
                    }
                }
                else if (action.payload === fromValue.userEmail) {
                    return {
                        ...state, 
                        userEmail:  '',
                        confirmEmail: ''
                    }
                   
                }
                return { ...state, confirmEmail: '' }
            default:
                throw new Error()
        }
    }

    const formReducer = (state, action) => {
        switch(action.type) {
            case 'userEmail':
                // dispatchFromErrMsg({type: 'userEmail', payload: action.payload})
                return { ...state, userEmail: action.payload }
            case 'confirmEmail':
                // dispatchFromErrMsg({type: 'userEmail', payload: action.payload})
                return { ...state, confirmEmail: action.payload }
            case 'userName':
                // dispatchFromErrMsg({type: 'userName', payload: action.payload})
                return { ...state, userName: action.payload }
            default:
                throw new Error()
        }
    }

    const [fromValue, dispatchFromValue] = useReducer(formReducer, initialForm)
    const [formErrMsg, dispatchFromErrMsg] = useReducer(errMsgReducer, initalErrMsg)

    const handleSubmit = () => {
        dispatchFromErrMsg({
            type: 'userName',
            payload: fromValue.userName
        })

        dispatchFromErrMsg({
            type: 'userEmail',
            payload: fromValue.userEmail
        })

        if ( validParams() ) {
            const param = {
                name: fromValue.userName,
                email: fromValue.userEmail
            }
            post_fake_auth(param)
            .then(() => {
                sucessCallback()
            })
            .catch((err) => {
                setErrMessage( err.data.errorMessage )
            });
        }
    }

    return {
        formErrMsg,
        dispatchFromErrMsg,
        dispatchFromValue,
        fromValue,
        handleSubmit,
        errMessage,
    }

}

export default useForm